<template>
	<!-- <scroller class="scroller" :style="{
			height:keyboardHeightFlg ? (windowHeight- chatInputBoxHeight - keyboardHeight)+'px' : (windowHeight- chatInputBoxHeight)+'px'
		}">    -->
	<scroller @tap="tapBlur" :style="{
			justifyContent: isScrollerFlex ? 'flex-start' : 'flex-end',
		}" ref="scrollerDom" class="scroller" :loadmoreoffset="loadmoreoffset" @loadmore="loadmore"
		style="flex: 1;direction: rtl;min-height: 100%;transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);">
		<div class="row_top" ref="rowTop">
		</div>
		<div @click.stop="hideTips">
			<div class="row" v-for="(item, index) in newRows" :ref="item.receiveUserNickName+item.id"
				style="direction: ltr;transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);">
				<!-- 	<template v-if="index == showTips">
						<view class="tips_box" :class="item.id !== 2 ?  'tips_left' : 'tips_right'">
							<text class="tips_text"
								style="border-right-width: 1rpx;border-right-color: #fefefe;">删除</text>
							<text class="tips_text"
								style="border-right-width: 1rpx;border-right-color: #fefefe;">撤回</text>
						</view>
					</template> -->
				<!-- 发送时间 -->
				<div class="time_box">
					<!-- 请使用服务器返回的发送成功时间 或者 使用本地存储的时间 -->
					<text class="time_text">
						<!-- {{$u.timeFormat(item.createTime , "yyyy年mm月dd日 hh时MM分")}} -->
						{{timeFormat(item.createTime)}}
					</text>
				</div>

				<div class="row_box" :style="{
						direction:item.receiveUserIde == 2?  'rtl' : 'ltr'
					}">
					<image lazy-load class="avatar_box" :src="item.sendUserHand" mode="aspectFill" />
					<!-- msgType (integer): 1 语音消息 2 图片消息（包含表情包） 3 表情 4 文字消息 , -->
					<!-- 文字 -->
					<template
						v-if="item.msgType == 4||item.msgType==3||item.msgType==5||item.msgType==6||item.msgType==7">
						<div :style="{backgroundColor:item.receiveUserIde==1?'#fff':'#44C630'}" class="content_text_box"
							:class="item.receiveUserIde == 1 ? 'content_box_color' : 'content_text_box'">
							<!-- @longpress="msgLongpress(item,index)" -->
							<text @click.stop="hideTips" :style="{color:item.receiveUserIde==1?'#333':'#fff'}"
								:class="item.receiveUserIde == 2 ? 'content_box_l' : 'content_box'"
								style="max-width:500rpx;">{{item.msgValue}}</text>
						</div>
					</template>
					<!-- 商品 -->
					<template v-if="item.msgType==8">
						<div @click='handGoods(item.msgValue.id)' class="content_text_box"
							:style="{backgroundColor:'#ffffff',width: '300rpx'}"
							:class="item.receiveUserIde == 1 ? 'content_box_color' : ''">
							<!-- @longpress="msgLongpress(item,index)" -->

							<image style="width: 260rpx;height: 260rpx; " :src="item.msgValue.imgUrl" mode=""></image>
							<text :class="item.receiveUserIde == 2 ? 'content_box_l' : 'content_box'"
								style="color: #FF0000;font-size: 32rpx;">¥{{item.msgValue.price}}</text>
							<text @click.stop="hideTips" :style="{color:'#333'}"
								:class="item.receiveUserIde == 2 ? 'content_box_l' : 'content_box'"
								style="font-size: 34rpx;">{{item.msgValue.title}}</text>
						</div>
					</template>
					<!-- 语音 -->
					<template v-if="item.msgType == 1">
						<div @click="payAudio(item,index)" class="audio_box" style='background-color: #FFFFFF;'
							:class="item.receiveUserIde == 1 ? 'content_box_color' : ''">
							<text class="content_box"
								style="color: #101010;">{{Number(item.voiceLength).toFixed(0)||0}}''</text>
							<image class="audio_img" src="/static/temp/audio.png" mode="aspectFill"></image>
						</div>
					</template>
					<!-- 图片 -->
					<template v-if="item.msgType == 2">
						<image @click="viewImg(item.msgValue)" :style="textStyle" class="content_img"
							:src="item.msgValue" mode="aspectFill"></image>
					</template>


				</div>
			</div>

		</div>
	</scroller>
</template>

<script>
	const dom = weex.requireModule('dom')
	const innerAudioContext = uni.createInnerAudioContext(); //音频
	export default {
		props: {
			keyboardHeightFlg: {
				type: Boolean,
				default: false
			},
			keyboardHeight: {
				type: Number,
				default: 0
			},
			windowHeight: {
				type: Number,
				default: 0
			},
			windowHeight: {
				type: Number,
				default: 0
			},
			rows: {
				type: Array,
				default: []
			},
			chatInputBoxHeight: {
				type: Number,
				default: 0
			}
		},

		watch: {
			keyboardHeightFlg(val) {
				this.isScroller()
			},
			rows(NewVal) {
				this.isScroller()
			}
		},
		computed: {
			newRows() {
				// this.rows.forEach(item => {
				// 	if (item.msgType == 8) {
				// 		item.msgValue = JSON.parse(item.msgValue)
				// 	}
				// })
				return this.rows
			},
			timeFormat() {
				return function(createTime) {
					return uni.$u.timeFormat(createTime, "yyyy年mm月dd日 hh时MM分")
				}
			}
		},
		data() {
			return {
				payAudioIndex: null,
				isLoadmore: false,
				isScrollerFlex: true,
				showTips: null,
				loadmoreoffset: 20,
				scrollHeight: 0,
				textStyle: 'max-width:500rpx;'
			}
		},
		mounted() {
			this.isScroller()
			//语音自然播放结束
			innerAudioContext.onEnded((res) => {
				console.log('播放结束')
				console.log(res)
				this.payAudioIndex = null
			});
		},
		methods: {
			handGoods(id) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + id
				})
			},
			tapBlur() {
				this.$emit('tapBlur')
			},
			isScroller() {
				// isLoadmore == true 说明数据超过了一屏
				if (this.rows.length <= 0 || this.isLoadmore) return
				setTimeout(() => {
					dom.getComponentRect(this.$refs.scrollerDom, res => {
						let scrollerDomH = res.size.height
						console.log(res)
						this.$nextTick(() => {
							if (this.isScrollerFlex) {
								let refName = this.rows[this.rows.length - 1].receiveUserNickName +
									this.rows[this.rows.length - 1].id
								console.log(this.$refs[refName])
								dom.getComponentRect(this.$refs[refName][0], resDom => {
									console.log(resDom)
									let rowsDomH = resDom.size.bottom
									let rowsDomT = resDom.size.top
									// 100 是导航栏高度
									if (rowsDomH < 100) {
										console.log('超过一屏')
										this.isScrollerFlex = true
										if (!this.keyboardHeightFlg) {
											this.isLoadmore = true
										}
									} else {
										this.isScrollerFlex = false
										console.log('不够一屏')
									}
								})
							} else {
								let refName = this.rows[0].name
								dom.getComponentRect(this.$refs[refName][0], resDom => {
									let rowsDomB = resDom.size.bottom
									console.log(resDom)
									if ((scrollerDomH - rowsDomB) < 20) {
										console.log('超过一屏')
										this.isScrollerFlex = true
										if (!this.keyboardHeightFlg) {
											this.isLoadmore = true
										}
									} else {
										this.isScrollerFlex = false
										console.log('不够一屏')
									}
								})
							}

						})
					})
				}, 500)
			},
			hideTips() {
				this.showTips = null

			},
			msgLongpress(item, index) {
				console.log(index)
				this.showTips = index
			},
			scrollData(e) {
				this.scrollHeight = e.contentSize.height
				console.log(this.scrollHeight)
			},
			loadmore() {
				this.$emit('loadmore')
				// for (let i = 0; i < 30; i++) {
				// 	this.rows.push({
				// 		name: 'row' + (i + 100),
				// 		id: 2,
				// 		type: 0
				// 	})
				// }
			},
			onrefresh() {
				let doms = this.rows[0].msgValue
				console.log(doms)
				console.log('下拉')
				let list = []
				for (let i = 0; i < 30; i++) {
					list.push({
						name: 'row' + (i + 100),
						id: 1,
						type: 0
					})
				}
				console.log(list)
				this.rows = [...list, ...this.rows]
				this.$nextTick(() => {
					let el = this.$refs[doms][0]
					console.log(el)
					dom.scrollToElement(el, {
						offset: 0,
						animated: false
					})
					console.log(111111)
				})
			},
			// 播放语音
			payAudio(item, index) {
				console.log(item)
				if (this.payAudioIndex == index) {
					innerAudioContext.src = '';
					this.$nextTick(function() {
						innerAudioContext.stop();
						this.payAudioIndex = null
					});
				} else {
					this.payAudioIndex = index
					console.log(item)
					innerAudioContext.src = item.msgValue
					this.$nextTick(function() {
						innerAudioContext.play();
					});
				}
			},
			// 查看图片
			viewImg(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			async scrollerBottom() {
				const el = this.$refs.rowTop
				if (this.isLoadmore) {
					//加入列队
					setTimeout(() => {
						dom.scrollToElement(el, {
							offset: 0,
						})
					}, 60)
				}
				// this.$nextTick(() => {
				// 	dom.scrollToElement(el, {
				// 		offset: 0
				// 	})
				// })

			},
		}
	}
</script>

<style lang='scss' scoped>
	.scroller {
		/* justify-content: flex-end; */
		/* justify-content: flex-start; */
		background-color: #F1F1F1;
	}

	.flex1 {
		flex: 1;
	}

	.row {
		padding-top: 10rpx;
		position: relative;
		flex-direction: column;
	}

	.row_top {
		height: 1rpx;
	}

	.time_box {
		height: 37rpx;
		margin-bottom: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.time_text {
		color: #999999;
		font-size: 26rpx;
	}

	.row_box {
		width: 750rpx;
		text-align: left;
		flex-direction: row !important;
		margin-bottom: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	/* 	.flex_end {
		direction:  rtl;
	}
.flex_start {
	direction: ltr;
	} */
	.avatar_box {
		width: 74rpx;
		height: 74rpx;
		border-radius: 6rpx;
	}

	.content_text_box {
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 6rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		padding-bottom: 17rpx;
		padding-top: 17rpx;
		background-color: #44C630;

	}

	.audio_box {
		flex-direction: row !important;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 6rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		padding-bottom: 17rpx;
		padding-top: 17rpx;
		background-color: #FFFFFF;

	}

	.content_box {
		text-align: left;
		color: #101010;
		border-radius: 20rpx;
	}


	.content_box_l {
		text-align: left;

		color: #fff;
		border-radius: 20rpx;
	}

	.content_img {
		width: 300rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		border-radius: 6rpx;
	}


	.tips_box {
		position: absolute;
		flex-direction: row;
		top: 0;
		background-color: #555555;
		border-radius: 15rpx;
	}

	.tips_left {
		left: 120rpx;
	}

	.tips_right {
		right: 120rpx;
	}

	.tips_text {
		font-size: 30rpx;
		width: 100rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.content_box_color {
		text-align: left;
		background-color: #fff;


	}



	.tal {
		text-align: left;
	}

	.audio_img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		transform: rotate(180deg);
	}
</style>
